import { Card, Table, Input, Select, Form, Button, Col, Row, Drawer } from 'antd';
import React, { useState, useEffect } from 'react';
import './index.css';

import createDrawerWithForm from 'comp/BaseDrawer';
import DsForm from 'comp/Datasource/DSForm';
import { getAllDriverType } from 'api/DriverManagerApi';
import { create } from 'api/DataSourceManagerApi';
import { useFetch } from 'hooks/useFetch';
import { $message, SUCCESS_CODE } from 'utils/CommonUtil';

export const DsManage = () => {

  const columns = [
    {
      title: '名称',
      name: 'dbName',
      key: 'dbName'
    },
    {
      title: '类型',
      name: 'type',
      key: 'rtpe'
    },
    {
      title: '连接地址',
      name: 'url',
      key: 'url'
    },
    {
      title: '操作',
      name: 'oper',
      key: 'oper'
    }
  ];

  // 查询参数加载驱动类型
  const { data: driverType } = useFetch(getAllDriverType, {});
  const [searchForm] = Form.useForm();

  const onFinish = () => {

  }

  // 添加数据源
  const onAddDatasource = () => {
    createDrawerWithForm(DsForm, {
      title: "添加数据源",
      okText: "保存",
      okTrigger: async (data, closeTrigger) => {
        const res = await create(data);
        if (res.code === SUCCESS_CODE) {
          closeTrigger();
        }
      },
      cancelTrigger: (data) => { }
    });
  }

  return (
    <>
      <Card style={{ marginBottom: 20 }}>
        <Row>
          <Col flex="1 1 200px">
            <Form
              layout='inline'
              form={searchForm}
              name="control-hooks"
              onFinish={onFinish}
              style={{ maxWidth: 1000 }}
            >
              <Form.Item name="name" label="名称">
                <Input placeholder='请输入名称' style={{ width: 200 }} allowClear />
              </Form.Item>
              <Form.Item name="type" label="驱动类型">
                <Select style={{ width: 200 }} allowClear options={driverType}>

                </Select>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  搜索
                </Button>
              </Form.Item>
            </Form>
          </Col>
          <Col flex="0 1 100px">
            <Button type="primary" onClick={onAddDatasource}>
              添加数据源
            </Button>
          </Col>
        </Row>
      </Card>
      <Table columns={columns} />
    </>
  )
}
